<template>
    <div class="radius-container">
        <div class="border-b pad-10 font-w font-15 topbar-style">需求信息</div>
        <div class="pad-20">
            <el-form :model="form" label-width="100px" :rules="rules" ref="form">
                <!-- 任务描述 -->
                <el-form-item label="任务描述：" class="pad-t-10 pad-b-5" prop="taskDescription">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 12}"
                            placeholder="请输入内容"
                            v-model="form.taskDescription">
                    </el-input>
                </el-form-item>

                <el-form-item label="附件：" prop="attachmentUrl">
                    <el-upload  label="附件" prop="attachmentUrl"
                                class="upload-demo" style="width:25%;"
                                action="/api/common/uploadFiles"
                                name="files"
                                :data="token"
                                :limit="5"
                                :on-remove="handleRemoveFile"
                                :on-success="handleUploadSuccess"
                                :file-list="form.fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>

    .el-input{
        width:20%
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .main-transfer {
        width: 200px;
    }

    .main-transfer-title {
        background-color: #f5f7fa;
        height: 40px;
        font-size: 16px;
        padding-left: 20px;
    }

    .main-transfer-list {
        height: 260px;
        overflow-y: scroll;
    }


</style>

<script>
  import Tinymce from '@/components/Tinymce'
  import { getToken } from '@/utils/auth'

  export default {
    components: { Tinymce },
    props: [],
    data() {
      return {
        token: '',
        form: {
          taskDescription: '',
          attachmentUrl: '',
          fileList: []
        },
        dict: {},
        rules: {
          taskDescription: [
            { required: true, message: '任务描述', trigger: 'blur' }
          ]
        }
      }
    },
    // 初始化页面
    // 初始化页面
    created() {
      // 初始化数据
      this.initTaskInfo()
      this.token = { accessToken: getToken() }
    },
    mounted() {
      const that = this
      // 监听数据字典
      this.$bus.$on('task.edit.dict', function(data) {
        that.dict = data
      })
    },
    methods: {
      initTaskInfo() {
        const that = this
        that.$bus.$on('project.task.edit.taskData', function(taskData) {
          that.form.taskDescription = taskData.taskDescription
          that.form.fileList = taskData.taskFileList
          that.form.fileList.forEach(file => {
            file.status = 'success'
          })
        })
      },
      handleRemoveFile(res, file) {
        this.form.fileList.splice(this.form.fileList.findIndex(item => item.url === res.url), 1)
      },
      handleUploadSuccess(res, file) {
        if (res.code === 101) {
          this.form.fileList.push({
            name: file.name,
            url: res.data[0]
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          this.form.fileList.splice(this.form.fileList.findIndex(item => item.url === res.url), 1)
        }
      },
      checkForm() {
        let ret = false
        this.$refs['form'].validate((valid) => {
          if (valid) {
            ret = true
          } else {
            ret = false
          }
        })
        return ret
      }
    }
  }
</script>
